<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <script src="javascripts/dragloader.js"></script>
    <link rel="stylesheet" href="stylesheets/zui.min.css"/>
    <link rel="stylesheet" href="stylesheets/main.css" id="css"/>
    <script src="javascripts/jquery-1.10.1.min.js"></script>
    <script src="javascripts/sockjs-0.3.min.js"></script>
    <script src="javascripts/zui.min.js"></script>
     <script src="javascripts/main.js"></script>
    <script src="javascripts/footer.js"></script>
    <script src="javascripts/tool.js"></script>
    <script type="text/javascript" src="javascripts/My97DatePicker/WdatePicker.js"></script>
    <title>斯迈普解盘侠在线喊单</title>
</head>
<body class="index">
<div class="container main">
    <!--搜索-->
   <!--  <div class="row search-box">
        <div class="col-xs-12">
            <div class="input-group search-group">
                <span class="input-group-addon fix-border fix-padding"></span>
                <select id="searType" class="form-control" style="font-size:1.6rem">
                    <option value="">所有</option>
                    <option value="黄金">黄金</option>
                    <option value="白银">白银</option>
                    <option value="原油">原油</option>
                    <option value="外汇">外汇</option>
                </select>
                <span class="input-group-addon fix-border fix-padding"></span>
                <input type="text" class="form-control" placeholder="搜索内容">
					<input id="searchStart" type="text" class="form-control Wdate" style="width:110px;height:32px;" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" value=""/>
					<input id="searchEnd" type="text" class="form-control Wdate" style="width:110px;height:32px;" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" value=""/>
            <span class="input-group-btn">
              <button id="searchBtn" class="btn btn-default" type="button"><i class="icon icon-search"></i></button>
            </span>
            </div>
        </div>
    </div> -->
    <!--搜索-->
    <div id="list-msg">
    </div>
    <!--列表块儿-->
   <footer class="nav-footer">
			<div class="col-xs-3" id="hall" >
				<i class="icon icon-home"></i>
				<h4>解盘</h4>
			</div>
			<div class="col-xs-3 footer-nav-active" id="notify"  >
				<i class="icon icon-volume-up"></i>
				<h4>喊单</h4>
			</div>
			<div class="col-xs-3" id= "news" >
				<i class="icon icon-globe"></i>
				<h4>资讯</h4>
			</div>
			<div class="col-xs-3" id="my" >
				<i class="icon icon-user"></i>
				<h4>个人中心</h4>
			</div>
</footer>
</div>
<script src="javascripts/main.js"></script>

<script>
	var firstPage = 1;
	var pageSize = 10;
	var alreadyHas=[];
	var dragger = getDragger(false,false);
	//数据字典
	var dict = {notifyType:{HJ:'黄金',YY:'原油',BY:'白银',WH:'外汇'},
				tradeType:{'in':'买入','out':'卖出','avg':'平仓'}
				};

	/**
     * 设置项选中状态控制
     */
    shoutListSetActive();
    function shoutListSetActive(){
        var $box = $(".setting-box>div>h4");
        $box.click(function () {
            var $this = $(this);
            $box.removeClass("list-set-active");
            $this.addClass("list-set-active");
        });
    }
    
    $(function(){
    	heartFun(false);
    	var userInfo = getLocalUserInfo();
    	/**
    	 * websocket对象，等待在页面加载完后初始化连接获取
    	 */
    	var ws = null;
    	
		//判断如果用户未登录，则跳转到登录界面
		
		if(userInfo == null || !userInfo._loginStatus){
			window.location.href='login.html?redirectUrl=listMsg.html';
			return;
		} 
    	
    	//加载数据信息
    	function loadData(paramData,callback){
    		var uri = "../notifyController/notifyList.do";
    		$.ajax({
    	        type : "get",
    	        dataType : "JSON",
    	        url : uri, 
    	        data : paramData,
    	        success : function(data){
    	        	if(data.success){
    	        		//成功则填充数据
    	        		callback(data);
    	        	}
    	        }, 
    	        error : function(){

    	        }
    		});
    	}
    	
    	function fillData(data,isTop){
    		var po = data;
    		var HTML = '';
    		var tradeTypeClass="open-sell-icon";
    		if(po.length == 0){
    			return;
    		}
    		
    		var $template = $('#template > .business-notify');
    		for(var i = 0 ; i < po.length ; i++){
    			alreadyHas.push(po[i].id);
    			if(po[i].tradeType == 'in'){
    				tradeTypeClass = "buy-icon-box";
    			}else{
    				tradeTypeClass="open-sell-icon";
    			}
    			var $notify = $template.clone();
    			var categoryType = dict.notifyType[po[i].categoryCode];
    			var tradeType = dict.tradeType[po[i].tradeType];
    			$notify.attr('name',po[i].id);
    			$notify.find('.business-category').html(categoryType);
    			$notify.find('.business-tradeType').addClass(tradeTypeClass).html(tradeType);
    			$notify.find('.business-lossPt').html(po[i].lossPt);
    			$notify.find('.business-pt').html(po[i].pt);
    			$notify.find('.business-entrust').html(po[i].entrust);
    			$notify.find('.business-remark').html(po[i].remark);
    			$notify.find('.business-publishTime').html(po[i].publishTime);
    			$notify.find('.business-profitPt').html(po[i].profitPt);
    			$notify.find('.business-fs').html(po[i].fs);
    			
    			if(isTop){
        			$('#list-msg').prepend($notify);
        		}else{
        			$('#list-msg').append($notify);
        		}
				
				
// 				HTML += '<div class="row list-msg-box" name="'+po[i].id+'"><div class="col-xs-12"><div class="tab-border"><table class="table"><tbody>' +
// 						'<tr><td><span>'+po[i].categoryCode+'</span><span class="tradeType '+tradeTypeClass+'">'+po[i].tradeType+'</span></td>' +
// 						'<td><span>止损:</span><span class="lossPt">'+notifyType+'</span></td></tr><tr><td  width="50%"><span class="strong-style pt">'+po[i].pt+'</span></td>' +
// 						'<td class="top-vertical"><span>止盈:</span><span class="profitPt">'+po[i].profitPt+'</span></td></tr><tr><td><span>仓位:</span><span class="fs">'+po[i].fs+'</span></td>' +
// 						'<td ><span class="mar-count">时间:</span><span class="mar-count publishDate">'+po[i].publishTime+'</span></td></tr><tr><td colspan="2"><span>类型:</span>' +
// 						'<span>'+po[i].entrust+'</span></td></tr><tr><td colspan="2"><span>备注:</span><span class="remark">'+po[i].remark+'</span>' +
// 						'</td> </tr></tbody></table></div></div></div>';
				
			}
    		
    	}
    	
    	
    	
    	function makeUpSearchParam(pageNo){
    		var paramData = {pageSize:pageSize,pageNo:pageNo};
    		var selSearchType = $('#searType').find(':selected').val();
    		//查询日期
    		var searchStart = $('#searchStart').val();
    		var searchEnd = $('#searchEnd').val();
    		if("" != paramData){
    			paramData['type'] = selSearchType;
    		}
    		if("" != searchStart){
    			paramData['searchStart'] = searchStart;
    		}
    		if("" != searchEnd){
    			paramData['searchEnd'] = searchEnd;
    		}
    		return paramData;
    	}
    	
    	function refreshPage(){
    		var paramData = makeUpSearchParam(firstPage);
    		loadData(paramData,function(data){
    			if(data.data.result != null){
					var newData = compar(data.data.result);
		    		fillData(newData,true);
    			}
	    	});
    	}
    	
    	//比较获取页面上不存在的数据
    	function compar(dataArr){
    		var arr = [];
    		if(alreadyHas.length <= 0){
    			return dataArr;
    		}
    		
    		for(var i = 0 ;i < dataArr.length ; i++){
    			if(alreadyHas.indexOf(dataArr[i].id) < 0){
    				//不存在
    				arr.push(dataArr[i]);
    			}
    		}
    		return arr;
    	}
    	
    	
    	//获取当前应该请求的页码
    	function getPageNo(){
    		var currMsgLength = alreadyHas.length;
    		return (parseInt(currMsgLength / pageSize) + 1);
    	}
    	
		dragger.on('dragDownLoad', function() {
	        setTimeout(function() {
	            /*备注：此处放置数据刷新的脚本，主要是新闻列表页的 li */
	            // 无论何时，必须由业务功能主动调用reset()接口，以还原状态
	            // 比如在onDragDownLoad()回调中使用ajax加载数据时，在ajax的回调函数中应当调用reset()重置drag状态
	            // 如果不重置，drag操作将失效
	            dragger.reset();
	            //用户往下滑动，则说明希望刷新最新消息，则查询服务器是否总页数有增加，如果已有的最后页记录数未满，则刷新已有最后页，如已满，则加载最新页
	            //检查最新页码有没有变化
	            refreshPage();
				//alert('down刷新');
	        }, 500);
	    });
		
		dragger.on('dragUpLoad', function() {
	    	setTimeout(function(){
	    		// 如果不重置，drag操作将失效
	    		dragger.reset();
	    		var paramData = makeUpSearchParam(getPageNo());
	    		loadData(paramData, function(data){
					var newData = compar(data.data.result);
		    		fillData(newData, false);
		    	});
	    	}, 500);
			
	    });
		
		$('#searchBtn').click(function(){
			var paramData = makeUpSearchParam(firstPage);
    		loadData(paramData,function(data){
    			alreadyHas = [];
				$('#list-msg').empty();
	    		fillData(data.data.result,true);
	    	});
		});
    	
		//初始化加载页面
		refreshPage();
		
		function addNotifyFun(notify){
			fillData(notify,true);
		};
		
		/**
		*更新指定的喊单信息
		*/
		function updateNotifyFun(notify){
			var $notify = $('#list-msg').find('div[name="'+notify.id+'"]');
			
			var tradeTypeClass = '';
			if(notify.tradeType == '买入'){
				tradeTypeClass = "buy-icon-box";
			}else{
				tradeTypeClass="open-sell-icon";
			}
			
			var tradeType = dict.tradeType[notify.tradeType];
			$notify.find('.business-tradeType').removeClass('buy-icon-box').removeClass('open-sell-icon').addClass(tradeTypeClass);
			$notify.find('.business-tradeType').html(tradeType);
			$notify.find('.business-lostPt').html(notify.lostPt);
			$notify.find('.business-pt').html(notify.pt);
			$notify.find('.business-profitPt').html(notify.profitPt);
			$notify.find('.business-fs').html(notify.fs);
			var date = new Date(notify.publishTime);
			var dateStr = date.format('MM-dd hh:mm')
			$notify.find('.business-publishTime').html(dateStr);
			$notify.find('.business-remark').html(notify.remark);
		};
		
		function deleteNotifyFun(notify){
			var $notify = $('#list-msg').find('div[name="'+notify.id+'"]');
			if($notify.length > 0){
				$notify.remove();
			}
		}
		
		//websocket监听服务器数据推送
	    function connect() {
	    	var url1 = 'ws://'+ websocketDomain+'/ep-websocket/websocket/notifyws';
	    	var url2 = 'http://'+websocketDomain+'/ep-websocket/websocket/notifyws';
	    	if ('WebSocket' in window) {
                ws = new WebSocket(url1);
            } else if ('MozWebSocket' in window) {
                ws = new MozWebSocket(url1);
            } else {
                ws = new SockJS(url2);
            }

            ws.onopen = function () {
//                alert('Info: connection opened.');
            	if(userInfo){
            		var data =  $.extend({_requestType:'userInfo'}, userInfo);
    				var userInfoJsonStr = JSON.stringify(data);
					ws.send(userInfoJsonStr);
    			} 
            };
            ws.onmessage = function (event) {
//                alert('Received: ' + event.data);
            	//数据派发
            	if(event.data != 'ok'){
            	var data  = JSON.parse(event.data);
            	var eventType = data._type;
            	var d = data;//真正的业务数据
	            	switch(eventType){
	            	
	            	case 'notifyCreated'://房间喊话数据更新
	            		
	            		addNotifyFun([d]);
	            		break;
	            	case 'notifyUpdated'://房间喊话数据更新
	            		updateNotifyFun(d);
	            		break;
	            	case 'notifyDeleted'://喊单消息删除
	            		deleteNotifyFun(d);
	            		break;
	            	case 'notifyFreezed'://喊单消息禁用
	            		deleteNotifyFun(d);
	            		break;
	            	case 'notifyUnfreezed'://喊单消息禁用
	            		addNotifyFun([d]);
	            		break;
	            	
	            	}
            	}
            };
            ws.onclose = function (event) {
            };
            ws.onerror = function(event){
            };
        };
        
        //清理并调用启动websocket代码
        if(ws){
			ws.close();//关闭旧的
			ws = null;
		}
        connect();
    });
    
</script>

<!-- 模板勿删 -->
	<div id="template" style="display:none;">
		<div class="row list-msg-box business-notify" name="">
			<div class="col-xs-12">
				<div class="tab-border">
					<table class="table">
						<tbody>
							<tr>
								<td>
								<span class="business-category"></span>
								<span class="business-tradeType"></span>
								</td>
								<td>
								<span>止损:</span>
								<span class="business-lossPt"></span>
								</td>
							</tr>
							<tr>
								<td  width="50%">
								<span class="strong-style business-pt"></span>
								</td>
								<td class="top-vertical">
								<span>止盈:</span>
								<span class="business-profitPt"></span>
								</td>
							</tr>
							<tr>
								<td>
								<span>仓位:</span>
								<span class="business-fs"></span>
								</td>
								<td >
								<span class="mar-count">时间:</span>
								<span class="mar-count business-publishTime"></span>
								</td>
							</tr>
<!-- 							<tr> -->
<!-- 								<td colspan="2"> -->
<!-- 								<span>类型:</span> -->
<!-- 								<span></span> -->
<!-- 								</td> -->
<!-- 							</tr> -->
							<tr>
								<td colspan="2">
								<span>备注:</span>
								<span class="business-remark"></span>
								</td> 
							</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
</div>
</body>
</html>